<template>
  <div class="report-page">
    <div class="report-header">
      <h1>报表中心</h1>
      <p>查看销售数据、营收统计和业务分析</p>
    </div>

    <div class="report-container">
      <!-- 左侧报表导航 -->
      <div class="report-sidebar">
        <div class="sidebar-section">
          <h3>报表类型</h3>
          <div class="report-menu">
            <div 
              class="report-menu-item" 
              :class="{ active: activeReport === 'dish-sales' }"
              @click="switchReport('dish-sales')"
            >
              <el-icon><Food /></el-icon>
              <span>菜品销售</span>
            </div>
            <div 
              class="report-menu-item" 
              :class="{ active: activeReport === 'item-ranking' }"
              @click="switchReport('item-ranking')"
            >
              <el-icon><Trophy /></el-icon>
              <span>品项排行</span>
            </div>
            <div 
              class="report-menu-item" 
              :class="{ active: activeReport === 'revenue-flow' }"
              @click="switchReport('revenue-flow')"
            >
              <el-icon><TrendCharts /></el-icon>
              <span>营收流水</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧报表内容 -->
      <div class="report-content">
        <!-- 菜品销售报表 -->
        <div v-if="activeReport === 'dish-sales'" class="report-section">
          <div class="section-header">
            <h2>菜品销售报表</h2>
            <el-button type="primary" @click="exportReport">
              <el-icon><Download /></el-icon>
              导出报表
            </el-button>
          </div>

          <!-- 查询条件 -->
          <div class="query-section">
            <el-form :model="dishSalesQuery" inline>
              <el-form-item label="搜索">
                <el-input 
                  v-model="dishSalesQuery.search" 
                  placeholder="输入菜品名称进行搜索"
                  style="width: 200px"
                />
              </el-form-item>
              <el-form-item label="时间">
                <el-date-picker
                  v-model="dishSalesQuery.dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
              <el-form-item label="菜品类别">
                <el-select v-model="dishSalesQuery.category" placeholder="全部" style="width: 120px">
                  <el-option label="全部" value="" />
                  <el-option label="炒菜" value="炒菜" />
                  <el-option label="汤类" value="汤类" />
                  <el-option label="主食" value="主食" />
                  <el-option label="饮品" value="饮品" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="queryDishSales">查询</el-button>
                <el-button @click="resetDishSalesQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 数据表格 -->
          <div class="data-section">
            <h3>明细数据</h3>
            <el-table :data="dishSalesData" border style="width: 100%">
              <el-table-column prop="serialNo" label="序号" width="80" />
              <el-table-column prop="dishName" label="菜品名称" />
              <el-table-column prop="dishCode" label="菜品编码" width="120" />
              <el-table-column prop="category" label="菜品类别" width="100" />
              <el-table-column prop="unit" label="菜品单位" width="80" />
              <el-table-column prop="unitPrice" label="单价" width="100">
                <template #default="scope">
                  ¥{{ scope.row.unitPrice }}
                </template>
              </el-table-column>
              <el-table-column prop="salesVolume" label="销售量" width="100" sortable />
              <el-table-column prop="returnQuantity" label="退货量" width="100" />
              <el-table-column prop="amount" label="金额" width="100">
                <template #default="scope">
                  ¥{{ scope.row.amount }}
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-wrapper">
              <el-pagination
                v-model:current-page="dishSalesPagination.currentPage"
                v-model:page-size="dishSalesPagination.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="dishSalesPagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleDishSalesSizeChange"
                @current-change="handleDishSalesCurrentChange"
              />
            </div>
          </div>
        </div>

        <!-- 品项排行报表 -->
        <div v-if="activeReport === 'item-ranking'" class="report-section">
          <div class="section-header">
            <h2>品项排行报表</h2>
            <el-button type="primary" @click="exportReport">
              <el-icon><Download /></el-icon>
              导出报表
            </el-button>
          </div>

          <!-- 查询条件 -->
          <div class="query-section">
            <el-form :model="itemRankingQuery" inline>
              <el-form-item label="时间">
                <el-date-picker
                  v-model="itemRankingQuery.dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
              <el-form-item label="排行类型">
                <el-select v-model="itemRankingQuery.rankType" placeholder="选择排行类型" style="width: 150px">
                  <el-option label="按销量排行" value="sales" />
                  <el-option label="按金额排行" value="amount" />
                  <el-option label="按利润排行" value="profit" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="queryItemRanking">查询</el-button>
                <el-button @click="resetItemRankingQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 数据表格 -->
          <div class="data-section">
            <h3>排行数据</h3>
            <el-table :data="itemRankingData" border style="width: 100%">
              <el-table-column prop="rank" label="排名" width="80" />
              <el-table-column prop="dishName" label="菜品名称" />
              <el-table-column prop="category" label="类别" width="100" />
              <el-table-column prop="salesVolume" label="销量" width="100" sortable />
              <el-table-column prop="amount" label="销售额" width="120" sortable>
                <template #default="scope">
                  ¥{{ scope.row.amount }}
                </template>
              </el-table-column>
              <el-table-column prop="profit" label="利润" width="100" sortable>
                <template #default="scope">
                  ¥{{ scope.row.profit }}
                </template>
              </el-table-column>
              <el-table-column prop="growthRate" label="增长率" width="100">
                <template #default="scope">
                  <span :class="scope.row.growthRate >= 0 ? 'positive' : 'negative'">
                    {{ scope.row.growthRate >= 0 ? '+' : '' }}{{ scope.row.growthRate }}%
                  </span>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-wrapper">
              <el-pagination
                v-model:current-page="itemRankingPagination.currentPage"
                v-model:page-size="itemRankingPagination.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="itemRankingPagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleItemRankingSizeChange"
                @current-change="handleItemRankingCurrentChange"
              />
            </div>
          </div>
        </div>

        <!-- 营收流水报表 -->
        <div v-if="activeReport === 'revenue-flow'" class="report-section">
          <div class="section-header">
            <h2>营收流水报表</h2>
            <el-button type="primary" @click="exportReport">
              <el-icon><Download /></el-icon>
              导出报表
            </el-button>
          </div>

          <!-- 查询条件 -->
          <div class="query-section">
            <el-form :model="revenueFlowQuery" inline>
              <el-form-item label="时间">
                <el-date-picker
                  v-model="revenueFlowQuery.dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
              <el-form-item label="支付方式">
                <el-select v-model="revenueFlowQuery.paymentMethod" placeholder="全部" style="width: 120px">
                  <el-option label="全部" value="" />
                  <el-option label="现金支付" value="cash" />
                  <el-option label="线上支付" value="online" />
                  <el-option label="扫码支付" value="scan" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="queryRevenueFlow">查询</el-button>
                <el-button @click="resetRevenueFlowQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 营收汇总 -->
          <div class="revenue-summary">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="summary-card">
                  <div class="summary-icon sales">
                    <el-icon><Money /></el-icon>
                  </div>
                  <div class="summary-content">
                    <div class="summary-value">¥{{ revenueSummary.totalSales }}</div>
                    <div class="summary-label">总销售额</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="summary-card">
                  <div class="summary-icon orders">
                    <el-icon><Document /></el-icon>
                  </div>
                  <div class="summary-content">
                    <div class="summary-value">{{ revenueSummary.totalOrders }}</div>
                    <div class="summary-label">总订单数</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="summary-card">
                  <div class="summary-icon profit">
                    <el-icon><TrendCharts /></el-icon>
                  </div>
                  <div class="summary-content">
                    <div class="summary-value">¥{{ revenueSummary.totalProfit }}</div>
                    <div class="summary-label">总利润</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="summary-card">
                  <div class="summary-icon customers">
                    <el-icon><User /></el-icon>
                  </div>
                  <div class="summary-content">
                    <div class="summary-value">{{ revenueSummary.totalCustomers }}</div>
                    <div class="summary-label">总客数</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <!-- 数据表格 -->
          <div class="data-section">
            <h3>流水明细</h3>
            <el-table :data="revenueFlowData" border style="width: 100%">
              <el-table-column prop="orderNo" label="订单号" width="150" />
              <el-table-column prop="orderTime" label="下单时间" width="180" />
              <el-table-column prop="tableNo" label="桌号" width="80" />
              <el-table-column prop="customerCount" label="人数" width="80" />
              <el-table-column prop="orderAmount" label="订单金额" width="120">
                <template #default="scope">
                  ¥{{ scope.row.orderAmount }}
                </template>
              </el-table-column>
              <el-table-column prop="discountAmount" label="优惠金额" width="120">
                <template #default="scope">
                  ¥{{ scope.row.discountAmount }}
                </template>
              </el-table-column>
              <el-table-column prop="actualAmount" label="实收金额" width="120">
                <template #default="scope">
                  ¥{{ scope.row.actualAmount }}
                </template>
              </el-table-column>
              <el-table-column prop="paymentMethod" label="支付方式" width="100" />
              <el-table-column prop="cashier" label="收银员" width="100" />
            </el-table>

            <!-- 分页 -->
            <div class="pagination-wrapper">
              <el-pagination
                v-model:current-page="revenueFlowPagination.currentPage"
                v-model:page-size="revenueFlowPagination.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="revenueFlowPagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleRevenueFlowSizeChange"
                @current-change="handleRevenueFlowCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 当前激活的报表
const activeReport = ref('dish-sales')

// 菜品销售查询条件
const dishSalesQuery = reactive({
  search: '',
  dateRange: [],
  category: ''
})

// 品项排行查询条件
const itemRankingQuery = reactive({
  dateRange: [],
  rankType: 'sales'
})

// 营收流水查询条件
const revenueFlowQuery = reactive({
  dateRange: [],
  paymentMethod: ''
})

// 菜品销售数据
const dishSalesData = ref([])
const dishSalesPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 品项排行数据
const itemRankingData = ref([])
const itemRankingPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 营收流水数据
const revenueFlowData = ref([])
const revenueFlowPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 营收汇总数据
const revenueSummary = reactive({
  totalSales: 0,
  totalOrders: 0,
  totalProfit: 0,
  totalCustomers: 0
})

// 切换报表
const switchReport = (reportType) => {
  activeReport.value = reportType
  // 重置分页
  resetPagination(reportType)
  // 加载对应数据
  loadReportData(reportType)
}

// 重置分页
const resetPagination = (reportType) => {
  switch (reportType) {
    case 'dish-sales':
      dishSalesPagination.currentPage = 1
      break
    case 'item-ranking':
      itemRankingPagination.currentPage = 1
      break
    case 'revenue-flow':
      revenueFlowPagination.currentPage = 1
      break
  }
}

// 加载报表数据
const loadReportData = (reportType) => {
  switch (reportType) {
    case 'dish-sales':
      loadDishSalesData()
      break
    case 'item-ranking':
      loadItemRankingData()
      break
    case 'revenue-flow':
      loadRevenueFlowData()
      break
  }
}

// 菜品销售查询
const queryDishSales = () => {
  dishSalesPagination.currentPage = 1
  loadDishSalesData()
}

// 重置菜品销售查询
const resetDishSalesQuery = () => {
  dishSalesQuery.search = ''
  dishSalesQuery.dateRange = []
  dishSalesQuery.category = ''
  queryDishSales()
}

// 品项排行查询
const queryItemRanking = () => {
  itemRankingPagination.currentPage = 1
  loadItemRankingData()
}

// 重置品项排行查询
const resetItemRankingQuery = () => {
  itemRankingQuery.dateRange = []
  itemRankingQuery.rankType = 'sales'
  queryItemRanking()
}

// 营收流水查询
const queryRevenueFlow = () => {
  revenueFlowPagination.currentPage = 1
  loadRevenueFlowData()
}

// 重置营收流水查询
const resetRevenueFlowQuery = () => {
  revenueFlowQuery.dateRange = []
  revenueFlowQuery.paymentMethod = ''
  queryRevenueFlow()
}

// 加载菜品销售数据
const loadDishSalesData = () => {
  // 模拟数据
  const mockData = []
  for (let i = 1; i <= 20; i++) {
    mockData.push({
      serialNo: i.toString().padStart(2, '0'),
      dishName: '农家小炒肉',
      dishCode: 'CP215224332',
      category: '炒菜',
      unit: '盘',
      unitPrice: 12.50,
      salesVolume: 100,
      returnQuantity: 10,
      amount: 1000
    })
  }
  
  dishSalesData.value = mockData
  dishSalesPagination.total = 100
}

// 加载品项排行数据
const loadItemRankingData = () => {
  // 模拟数据
  const mockData = []
  const dishes = ['农家小炒肉', '宫保鸡丁', '麻婆豆腐', '水煮鱼', '回锅肉']
  
  for (let i = 0; i < dishes.length; i++) {
    mockData.push({
      rank: i + 1,
      dishName: dishes[i],
      category: '炒菜',
      salesVolume: 100 - i * 10,
      amount: 1000 - i * 100,
      profit: 300 - i * 30,
      growthRate: 15 - i * 2
    })
  }
  
  itemRankingData.value = mockData
  itemRankingPagination.total = 50
}

// 加载营收流水数据
const loadRevenueFlowData = () => {
  // 模拟数据
  const mockData = []
  for (let i = 1; i <= 20; i++) {
    mockData.push({
      orderNo: `ORD${Date.now().toString().slice(-8)}${i.toString().padStart(2, '0')}`,
      orderTime: '2024-01-15 12:30:00',
      tableNo: `A${i % 10 + 1}`,
      customerCount: 4,
      orderAmount: 128.00,
      discountAmount: 10.00,
      actualAmount: 118.00,
      paymentMethod: '扫码支付',
      cashier: '1001'
    })
  }
  
  revenueFlowData.value = mockData
  revenueFlowPagination.total = 200
  
  // 更新汇总数据
  revenueSummary.totalSales = 23600
  revenueSummary.totalOrders = 200
  revenueSummary.totalProfit = 7080
  revenueSummary.totalCustomers = 800
}

// 分页处理函数
const handleDishSalesSizeChange = (size) => {
  dishSalesPagination.pageSize = size
  loadDishSalesData()
}

const handleDishSalesCurrentChange = (page) => {
  dishSalesPagination.currentPage = page
  loadDishSalesData()
}

const handleItemRankingSizeChange = (size) => {
  itemRankingPagination.pageSize = size
  loadItemRankingData()
}

const handleItemRankingCurrentChange = (page) => {
  itemRankingPagination.currentPage = page
  loadItemRankingData()
}

const handleRevenueFlowSizeChange = (size) => {
  revenueFlowPagination.pageSize = size
  loadRevenueFlowData()
}

const handleRevenueFlowCurrentChange = (page) => {
  revenueFlowPagination.currentPage = page
  loadRevenueFlowData()
}

// 导出报表
const exportReport = () => {
  ElMessage.success(`${activeReport.value === 'dish-sales' ? '菜品销售' : activeReport.value === 'item-ranking' ? '品项排行' : '营收流水'}报表导出成功`)
}

// 页面加载时初始化数据
onMounted(() => {
  loadDishSalesData()
})
</script>

<style scoped>
.report-page {
  padding: 20px;
}

.report-header {
  text-align: center;
  margin-bottom: 30px;
}

.report-header h1 {
  font-size: 28px;
  color: #303133;
  margin-bottom: 8px;
}

.report-header p {
  font-size: 16px;
  color: #909399;
}

.report-container {
  display: flex;
  gap: 20px;
}

.report-sidebar {
  width: 200px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.sidebar-section h3 {
  font-size: 16px;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}

.report-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #606266;
}

.report-menu-item:hover {
  background: #f5f7fa;
  color: #409EFF;
}

.report-menu-item.active {
  background: #409EFF;
  color: #fff;
}

.report-menu-item .el-icon {
  font-size: 18px;
}

.report-content {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.report-section {
  min-height: 600px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.section-header h2 {
  font-size: 20px;
  color: #303133;
  margin: 0;
}

.query-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 24px;
}

.data-section h3 {
  font-size: 16px;
  color: #303133;
  margin-bottom: 16px;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}

.revenue-summary {
  margin-bottom: 24px;
}

.summary-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
}

.summary-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.summary-icon.sales {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
}

.summary-icon.orders {
  background: linear-gradient(135deg, #48dbfb, #0abde3);
}

.summary-icon.profit {
  background: linear-gradient(135deg, #1dd1a1, #10ac84);
}

.summary-icon.customers {
  background: linear-gradient(135deg, #5f27cd, #341f97);
}

.summary-icon .el-icon {
  font-size: 24px;
}

.summary-content {
  flex: 1;
}

.summary-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.summary-label {
  font-size: 14px;
  color: #909399;
}

.positive {
  color: #67c23a;
}

.negative {
  color: #f56c6c;
}
</style> 